<template>
	<view>
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120" show-scrollbar="false">
			<view class="scroll-view-item" v-for="item in navList" :class="{ active: curNav == item.id }" :key="item.id" @click="switchNav(item.id)">{{ item.name }}</view>
		</scroll-view>
		<mescroll-uni top="80" @down="downCallback" :down="downOption" :up="upOption">
			<view class="video-list">
				<view class="video-item" v-for="(item,index) in videoList" :key="index">
					<view class="video-wrap">
						<image :src="item.cover" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</mescroll-uni>

	</view>
</template>
<script>
	import service from '../../untils/service.js';
	export default {
		data() {
			return {
				// 下拉刷新的常用配置
				downOption: {
					auto: false // 是否在初始化后,自动执行下拉回调callback; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
				},
				curNav: 0,
				navList: [{
						name: "推荐",
						id: 0
					},
					{
						name: "LOOK直播",
						id: 1
					},
					{
						name: "音乐画像",
						id: 2
					},
					{
						name: "走马",
						id: 3
					},
					{
						name: "告白",
						id: 4
					},
					{
						name: "超燃联盟",
						id: 5
					}
				],
				videoList: [],
				api: ""
			};
		},
		onLoad() {
			this.switchNav(0);
			this.getvideoList()
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				uni.request({
					url: this.api,
					data: {
						limit: 10
					},
					method: 'GET',
					success: (res) => {
						// console.log(res.data);
						if (res.data.code == 200) {
							this.videoList = res.data.data;
						} // 请求成功,隐藏加载状态
						mescroll.endSuccess()
					},
					fail: (err) => {
						mescroll.endErr()
					},
				})
			},
			switchNav(id) {
				this.curNav = id;
				switch (id) {
					case 0:
						this.api = service.getvideoList;
						break;
					case 1:
						this.api = service.getLookList;
						break;
					case 2:
						this.api = service.getMusicList;
						break;
				};
				this.getvideoList()
			},
			getvideoList() {
				uni.showLoading({
					title: '加载中...'
				});
				uni.request({
					url: this.api,
					data: {
						limit: 10
					},
					method: 'GET',
					success: (res) => {
						// console.log(res.data);
						if (res.data.code == 200) {
							this.videoList = res.data.data;
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '网络请求错误',
							icon: 'none',
							duration: 2000
						});
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.scroll-view_H {
		width: 100%;
		white-space: nowrap;

		.scroll-view-item {
			position: relative;
			text-align: center;
			display: inline-block;
			font-weight: 700;
			padding: 5px 15px;
			// min-width: 100px;
			line-height: 17px;
		}

		.active {
			color: #f32628;
			border-bottom: 2px solid #f32628;
		}
	}

	.video-list {
		width: 100%;
		padding: 10rpx;

		.video-item {
			padding: 10rpx;
			border-bottom: 2px solid #ccc;

			.video-wrap {
				image {
					border-radius: 10rpx;
					width: 100%;
					height: 200px;

				}

				text {
					font-weight: 700;

				}
			}
		}
	}
</style>
